<!--
* @author wn
* @date 2022/05/09 11:46:43
* @description: 首页产品中心
!-->
<template>
	<div class="home-product" ref="target">
		<home-panel v-for="item in result" :key="item.id" :title="item.name">
			<template #right>
				<!-- 二级分类标题 -->
				<div class="sub">
					<router-link
						v-for="i in item.children"
						:key="i.id"
						:to="`/category/sub/${i.id}`"
					>
						{{ i.name }}
					</router-link>
				</div>
				<!-- 查看全部 -->
				<xtx-more />
			</template>
			<!--  默认插槽-->
			<div class="box" v-if="item">
				<router-link class="cover" to="/">
					<img v-lazy="item.picture" alt="" />
					<strong class="label">
						<span>{{ item.name }}馆</span>
						<span>{{ item.saleInfo }}</span>
					</strong>
				</router-link>
				<!-- 首页商品 组件  HomeGoods -->
				<ul class="goods-list">
					<li v-for="good in item.goods" :key="good.id">
						<home-goods :good="good" />
					</li>
				</ul>
			</div>
			<!-- 骨架屏 -->
			<div v-else class="skeleton">骨架屏</div>
		</home-panel>
	</div>
</template>
<script>
import HomeGoods from './HomeGoods'
import HomePanel from './HomePanel'
import { useLazyData } from '@/hooks'
import { findGoods } from '@/network/home'

export default {
	name: 'HomeProduct',
	components: {
		HomeGoods,
		HomePanel,
	},
	setup() {
		const { target, result } = useLazyData(findGoods)
		return { target, result }
	},
}
</script>
<style scoped lang="less">
.home-product {
	height: 2900px;
	background: #fff;
	.sub {
		margin: 0 80px 2px 0;
		a {
			padding: 2px 12px;
			font-size: 16px;
			border-radius: 4px;
			&:hover {
				background: @xtxColor;
				color: #fff;
			}
		}
	}
	.box {
		display: flex;
		.cover {
			position: relative;
			width: 240px;
			height: 610px;
			margin-right: 10px;
			img {
				width: 100%;
				height: 100%;
				//对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框  background一样
				object-fit: cover;
			}
			.label {
				display: flex;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 188px;
				height: 66px;
				font-size: 18px;
				color: #fff;
				line-height: 66px;
				font-weight: normal;
				span {
					text-align: center;
					width: 76px;
					background: rgba(0, 0, 0, 0.9);
					&:last-child {
						flex: 1;
						background: rgba(0, 0, 0, 0.6);
					}
				}
			}
		}
		.goods-list {
			display: flex;
			flex-wrap: wrap;
			width: 990px;
			li {
				width: 240px;
				height: 300px;
				margin: 0 10px 10px 0;
				&:nth-child(4n) {
					margin-right: 0;
				}
				// 4 3 2 1   选中最后四个元素
				&:nth-last-child(-n + 4) {
					margin-bottom: 0;
				}
			}
		}
	}
	// 骨架屏
}
</style>
